<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-04-10 14:31:59
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-04-25 15:20:54
 * @FilePath: \crm\pagesecharts\index\components2\card2.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view class="card">
    <view class="title u-flex u-flex-between">
      <view class="u-flex">
        <u--image
          :src="$z.imgsrc('jian2.png')"
          width="36rpx"
          height="36rpx"
        ></u--image>
        <view class="text">业绩目标</view>
      </view>

      <!-- <u-icon name="arrow-right"></u-icon> -->
    </view>

    <view class="title2">合同金额</view>
    <view class="u-flex" style="padding: 0 24rpx 0 40rpx">
      <view style="width: 300rpx; height: 300rpx">
        <l-echart ref="chartRef" @finished="init"></l-echart>
      </view>
      <view class="list">
        <view class="item">
          <view class="label">完成值</view>
          <view class="value">
            <text class="dw">￥</text>
            <text class="v">1,321,224.00</text>
          </view>
        </view>
        <view class="item">
          <view class="label">未完成值</view>
          <view class="value">
            <text class="dw">￥</text>
            <text class="v">1,321,224.00</text>
          </view>
        </view>
      </view>
    </view>
    <view class="title2">赢单商机金额</view>
    <view class="u-flex" style="padding: 0 24rpx 0 40rpx">
      <view style="width: 300rpx; height: 300rpx">
        <l-echart ref="chartRef2" @finished="init2"></l-echart>
      </view>
      <view class="list">
        <view class="item">
          <view class="label">完成值</view>
          <view class="value">
            <text class="dw">￥</text>
            <text class="v">1,321,224.00</text>
          </view>
        </view>
        <view class="item">
          <view class="label">未完成值</view>
          <view class="value">
            <text class="dw">￥</text>
            <text class="v">1,321,224.00</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import * as echarts from "@/pagesecharts/lime-echart/static/echarts.min";
  import lEchart from "@/pagesecharts/lime-echart/components/l-echart/l-echart.vue";
  export default {
    components: {
      lEchart,
    },
    data() {
      return {
        option: {
          series: [
            {
              radius: "90%",
              type: "gauge",
              center: ["45%", "55%"],
              startAngle: 220,
              endAngle: -40,
              min: 0,
              max: 100,
              itemStyle: {
                color: "#FFA600",
              },
              progress: {
                show: true,
                roundCap: true,
                width: 10,
              },
              pointer: {
                show: false,
              },
              axisLine: {
                roundCap: true,
                lineStyle: {
                  width: 10,
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              // nameTextStyle: {
              //   color: "red"
              // },
              detail: {
                valueAnimation: true,
                width: "60%",
                lineHeight: 40,
                borderRadius: 8,
                offsetCenter: [0, -10],
                fontSize: 30,
                fontWeight: "bolder",
                formatter: "{value}%",
                color: "inherit",
              },
              data: [
                {
                  value: 43,
                  name: "完成率",
                  title: {
                    offsetCenter: ["0%", "28%"],
                    color: "#838589",
                  },
                },
              ],
            },
          ],
        },
        option2: {
          series: [
            {
              radius: "90%",
              type: "gauge",
              center: ["45%", "55%"],
              startAngle: 220,
              endAngle: -40,
              min: 0,
              max: 100,
              itemStyle: {
                color: "#613EFF",
              },
              progress: {
                show: true,
                roundCap: true,
                width: 10,
              },
              pointer: {
                show: false,
              },
              axisLine: {
                roundCap: true,
                lineStyle: {
                  width: 10,
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              // nameTextStyle: {
              //   color: "red"
              // },
              detail: {
                valueAnimation: true,
                width: "60%",
                lineHeight: 40,
                borderRadius: 8,
                offsetCenter: [0, -10],
                fontSize: 30,
                fontWeight: "bolder",
                formatter: "{value} %",
                color: "inherit",
              },
              data: [
                {
                  value: 45,
                  name: "完成率",
                  title: {
                    offsetCenter: ["0%", "28%"],
                    color: "#838589",
                  },
                },
              ],
            },
          ],
        },
      };
    },
    // 组件能被调用必须是组件的节点已经被渲染到页面上
    methods: {
      async init() {
        // chart 图表实例不能存在data里
        const chart = await this.$refs.chartRef.init(echarts);
        chart.setOption(this.option);
      },
      async init2() {
        const chart = await this.$refs.chartRef2.init(echarts);
        chart.setOption(this.option2);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .card {
    margin: 14rpx 18rpx;
    background-color: #fff;
    border-radius: 8rpx;
    padding-bottom: 20rpx;

    // padding: 0 24rpx;
    // padding-bottom: 16rpx;
    .title {
      font-size: 28rpx;
      font-weight: bold;
      height: 88rpx;
      padding: 0 24rpx;

      .text {
        padding-left: 12rpx;
        line-height: 1;
      }
    }

    .title2 {
      height: 48rpx;
      display: flex;
      align-items: center;
      color: #171a1d;
      font-size: 24rpx;
      position: relative;
      padding-left: 40rpx;
      font-weight: bold;

      &::before {
        position: absolute;
        left: 24rpx;
        top: 50%;
        transform: translateY(-50%);
        content: "";
        width: 4rpx;
        height: 16rpx;
        background: #ffa600;
        border-radius: 4rpx;
      }
    }
  }

  .list {
    flex: 1;
    height: 300rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 26rpx 0;

    .item {
      background: #f4f6fa;
      border-radius: 8rpx;
      height: 112rpx;
      padding-left: 52rpx;
      padding-top: 18rpx;
      padding-bottom: 18rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .label {
        color: #838589;
        font-size: 24rpx;
        line-height: 1;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          width: 16rpx;
          height: 16rpx;
          background-color: #ffa600;
          border-radius: 50%;
          left: -30rpx;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      &:nth-child(even) {
        .label {
          &::after {
            background-color: #c1c5c9;
          }
        }
      }

      .value {
        color: #171a1d;

        .dw {
          font-size: 24rpx;
        }

        .v {
          font-size: 28rpx;
          font-weight: bold;
        }
      }
    }
  }
</style>
